<template>
    <div>
        <div class="seach">
            <span>
                {{$t('chnnumber')}}
                <el-input v-model.trim="getchnlistForm.channelId" :placeholder="$t('plsset')" size="mini"></el-input>
            </span>
            <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
            <!-- <el-button type="warning" @click="showAdd" size="mini">{{$t('add')}}</el-button> -->
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="chnproTab">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="channelId" :label="$t('chnnumber')" min-width="131">
                </el-table-column>
                <el-table-column prop="channelMerId" :label="$t('chnmerno')" min-width="164">
                </el-table-column>
                <el-table-column prop="productType" :label="$t('producttype')" min-width="125">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')" min-width="79">
                </el-table-column>
                <el-table-column prop="singleLowerLmt" :label="$t('singleslimit')" min-width="105">
                </el-table-column>
                <el-table-column prop="singleUpperLmt" :label="$t('singleupperlimit')" min-width="123">
                </el-table-column>
                <el-table-column prop="requestUrl" :label="$t('channelaccessaddress')" min-width="169">
                </el-table-column>
                <el-table-column prop="callbackUrl" :label="$t('callbackaddress')" min-width="270">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="90" fixed="right">
                    <template slot-scope="scope">
                        <!-- <el-link type="primary" @click="showDetil(scope.row)">{{$t('detls')}}</el-link> -->
                        <el-link type="primary" @click="showEdit(scope.row)">{{$t('mdfy')}}</el-link>
                        <!-- <el-link type="primary" @click="showListBanks(scope.row)">{{$t('supportbanklist')}}</el-link> -->
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="getchnlistForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="getchnlistForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :pager-count="5">
            </el-pagination>
        </el-card>
        <!-- edit -->
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editchnproForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="editchnproForm" :rules="editchnproRul" :model="editchnproForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('callbackaddress')" prop="callbackUrl">
                    <el-input v-model.trim="editchnproForm.callbackUrl" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <!-- <el-form-item :label="$t('channelrate')" prop="channelRate">
                    <el-input v-model="editchnproForm.channelRate" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('rate')" prop="channelRate">
                    <el-input v-model="editchnproForm.channelRate" :placeholder="$t('plsipt')"></el-input>
                </el-form-item> -->
                <el-form-item :label="$t('channelaccessaddress')" prop="requestUrl">
                    <el-input v-model.trim="editchnproForm.requestUrl" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('singleslimit')" prop="singleLowerLmt">
                    <el-input v-model.trim="editchnproForm.singleLowerLmt" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('singleupperlimit')" prop="singleUpperLmt">
                    <el-input v-model.trim="editchnproForm.singleUpperLmt" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
                <!-- <el-form-item :label="$t('rattyp')" prop="rateType">
                    <el-select v-model="editchnproForm.rateType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('single')" value="0"></el-option>
                        <el-option :label="$t('percentage')" value="1"></el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="editchnproForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item :label="$t('bankcdtp')" prop="cardType">
                    <el-select v-model="editchnproForm.cardType" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('allsupport')" value="DEBITCREDIT"></el-option>
                        <el-option :label="$t('debitcard')" value="DEBIT"></el-option>
                        <el-option :label="$t('creditcard')" value="CREDIT"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editChnPro()" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getrouterproductlist,
    updaterouterproduct
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            isOk: false,
            total: 0,
            getchnlistForm: {
                channelId: null,
                orderParamIdx: 0,
                orderType: 0,
                pageNum: 1,
                pageSize: 10
            },
            chnproTab: [],
            editchnproForm: {
                callbackUrl: null,
                cardType: null,
                channelMerId: null,
                channelRate: null,
                id: null,
                keyPassword: null,
                keyPath: null,
                privateKey: null,
                publicKey: null,
                rateType: null,
                requestUrl: null,
                singleLowerLmt: null,
                singleUpperLmt: null,
                status: null
            },
            editDialogVisible: false,
            editchnproRul: {
                callbackUrl: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                requestUrl: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                singleLowerLmt: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                singleUpperLmt: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ],
                status: [
                    { required: true, message: this.$t('cantbeemt'), trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        getchlproList() {
            getrouterproductlist(JSON.stringify(this.getchnlistForm)).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    this.chnproTab = res.data.data.list
                    this.chnproTab.forEach(item => {
                        if (item.status === 'VALID') item.status = this.$t('vlid')
                        if (item.status === 'INVALID') item.status = this.$t('invlid')
                        if (item.productType === 'WHP') item.productType = this.$t('withhold')
                        if (item.productType === 'BQP') item.productType = this.$t('shortcut')
                        if (item.productType === 'AGTP') item.productType = this.$t('undertakesto')
                        if (item.productType === 'GWP') item.productType = this.$t('gateway')
                        if (item.productType === 'SIGN') item.productType = this.$t('tiedcard')
                    })
                }
            })
        },
        seach() {
            this.getchnlistForm.pageNum = 1
            this.getchlproList()
        },
        showEdit(data) {
            this.editchnproForm.callbackUrl = data.callbackUrl
            this.editchnproForm.cardType = data.cardType
            this.editchnproForm.channelMerId = data.channelMerId
            this.editchnproForm.channelRate = data.channelRate
            this.editchnproForm.id = data.id
            this.editchnproForm.keyPassword = data.keyPassword
            this.editchnproForm.keyPath = data.keyPath
            this.editchnproForm.privateKey = data.privateKey
            this.editchnproForm.publicKey = data.publicKey
            this.editchnproForm.rateType = data.rateType
            this.editchnproForm.requestUrl = data.requestUrl
            this.editchnproForm.singleLowerLmt = data.singleLowerLmt
            this.editchnproForm.singleUpperLmt = data.singleUpperLmt
            this.editchnproForm.status = data.status
            this.editDialogVisible = true
        },
        editChnPro() {
            if (this.editchnproForm.status === this.$t('vlid')) this.editchnproForm.status = 'VALID'
            if (this.editchnproForm.status === this.$t('invlid')) this.editchnproForm.status = 'INVALID'
            updaterouterproduct(JSON.stringify(this.editchnproForm)).then(res => {
                if (res.data.code === '000000') {
                    this.$message({
                        message: this.$t('modfunsuc'),
                        type: 'success'
                    })
                    this.getchlproList()
                    this.editDialogVisible = false
                }
            })
        },
        editDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        handleSizeChange (newSize) {
            this.selPro.pageSize = newSize
            this.getProList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.selPro.pageNum = newNum
            window.localStorage.setItem('curpage', newNum)
            this.getProList()
        }
    },
    mounted () {
        this.getchlproList()
    }
}
</script>

<style lang="less" scoped>
@import './prdList.less';
</style>
